<template>
  <div id="app">
    <el-container style="height:100vh; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <div class="logo">
          <i class="el-icon-maple"></i>枫叶测速
        </div>
        <el-menu :default-active="getActiveRoute">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-promotion"></i>测速
            </template>
            <el-menu-item-group>
              <el-menu-item @click="toLink" index="1-1">下载测试</el-menu-item>
              <el-menu-item @click="toPing" index="1-2">Ping测试</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
        <div class="author">作者：Chineek</div>
      </el-aside>
      <el-container>
        <el-main>
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "files-light",
  computed: {
    getActiveRoute () {
      switch (this.$route.name) {
        case "link-test":
          return "1-1";
        case "ping-test":
          return "1-2";
        default:
          break;
      }
      return "";
    }
  },
  methods: {
    toPing () {
      if (this.$route.name !== "ping-test")
        this.$router.push({ name: "ping-test" });
    },
    toLink () {
      if (this.$route.name !== "link-test")
        this.$router.push({ name: "link-test" });
    }
  }
};
</script>

<style>
* {
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, SimSun, sans-serif;
}
html,
body {
  padding: 0;
  margin: 0;
}
.logo {
  height: 50px;
  display: flex;
  align-items: center;
  color: #6e140c;
  background-color: #ffffff;
  padding: 0 10px;
  font-size: 20px;
  font-weight: bold;
}
.el-icon-maple {
  background-image: url('./assets/icon.png');
  background-size: 1em 1em;
  background-repeat: no-repeat;
  width: 1em;
  height: 1em;
  padding-right: 0.5em;
}
.author {
  padding: 1em;
  font-size: 0.8em;
  color: #b6b6b6;
}
</style>
